import "./index.css"

// 定义一个轮播图父类
class Banner {
    /**
     *
     * @param {*} root
     * @param {*} param1
     */
    constructor({ root, btnClass = [], listClass, dotClass }) {
        // 当前轮播图的容器
        this.root = document.querySelector(root);
        // 左右按钮
        this.lBtn = document.querySelector(btnClass[0]);
        this.rBtn = document.querySelector(btnClass[1]);
        // 获取图片容器
        this.list = document.querySelectorAll(listClass);
        // 小圆点
        this.dots = document.querySelectorAll(dotClass);
    }
}

// 定义一个网易云轮播图
class WyBanner extends Banner {
    constructor({ root, btnClass = [], listClass, dotClass }) {
        super({ root, btnClass, listClass, dotClass });
        // 类名集合（图片切换）
        this.classList = ['img-1', 'img-2', 'img-3', 'img-4'];
        // 初始值
        this.index = 0;
        // 记录上一次的操作下标
        this.lastIndex = 0;
        this.btnChange();
        this.clickDot();
    }
    // 点击按钮左右切换事件
    btnChange() {
        this.rBtn.addEventListener('click', rightHandle.bind(this));
        this.lBtn.addEventListener('click', leftHandle.bind(this));
    }
    clickDot() {
        let this1 = this;
        this.dots.forEach(function (el) {
            el.addEventListener('click', dotHandle.bind(this1));
        });
    }
}

function dotHandle(el) {
    let tempLastIndex = this.index;
    if (el.target.dataset.num - tempLastIndex >= 0) {
        for (let i = 0; i < el.target.dataset.num - tempLastIndex; i++) {
            this.lastIndex = this.index;
            rightHandle.call(this);
        }
    } else {
        for (let i = 0; i < tempLastIndex - el.target.dataset.num; i++) {
            this.lastIndex = this.index;
            leftHandle.call(this);
        }
    }
    resetClass.call(this);
    dotsColor.call(this);
}
// 处理右边的时间回调
function rightHandle() {
    // console.log(this);
    // 当前index自增
    this.lastIndex = this.index;
    this.index++;
    // 修改类名的顺序，然后再根据类名的书序修改当前图片的类名（重置类名）
    this.classList.unshift(this.classList.pop());
    resetClass.call(this);
    dotsColor.call(this);
}
function leftHandle() {
    // console.log(this);
    // 当前index自增
    this.lastIndex = this.index;
    this.index--;

    // 修改类名的顺序，然后再根据类名的书序修改当前图片的类名（重置类名）
    this.classList.push(this.classList.shift());
    resetClass.call(this);
    dotsColor.call(this);
}

// 重置类名
function resetClass() {
    this.list.forEach((el, index) => {
        el.className = this.classList[index];
    });
}

// 小圆点移动类名
function dotsColor() {
    // index的最大值
    if (this.index === this.list.length) {
        //恢复到第一位
        this.index = 0;
    }
    // index的最小值
    if (this.index < 0) {
        this.index = this.list.length - 1;
    }
    // 保留上一次操作的值
    this.dots[this.lastIndex].classList.remove('dot-active');
    this.dots[this.index].classList.add('dot-active');
    // this.lastIndex = this.index
}

//ES6 模块化默认开启严格函数
// export { Banner, WyBanner };
let b1 = new WyBanner({
    root: ".box",
    btnClass: [".arrow_left", ".arrow_right"],
    listClass: ".img_box>ul>li",
    dotClass: ".dot_box>span",
  });